<template>
  <div
    v-loading="loading"
    class="box-income"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    <el-col v-for="item, index in incomeList" :key="index" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="income-main" :class="activeIncome === index ? 'income-active' : ''" @click="onChange(item, index)">
        <div class="income-name">{{ item.name }}</div>
        <div class="income-value">{{ item.value }}</div>
        <div v-if="activeIncome === index" class="active-icon"><i class="el-icon-check" />
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    incomeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIncome: 0,
      loading: true
    }
  },
  computed: {

  },
  watch: {
    incomeList: {
      handler(newVal) {
        this.loading = false
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    onChange(e, index) {
      this.activeIncome = index
      this.$emit('IncomeType', e.type)
    }
  }
}
</script>
